<template>
	<view class="images-box">
		<uni-file-picker v-model="image" fileMediatype="image" mode="grid" @select="select" @delete="deleteImage" />
	</view>
</template>

<script setup lang="ts">
	import { ref } from 'vue';
	import { uploadFile } from '../services/upload';
	const image = ref([]);
	// 获取上传状态
	const select = (e) => {
		console.log(e)
		uni.uploadFile({
			url: '/app/upload',
			header: {
				'Content-Type': 'multipart/form-data',
			},
			filePath: e.tempFilePaths[0],
			name: 'file',
			success: function (res) {
				const obj = JSON.parse(res.data);
				console.log(obj["data"])
				image.value.push(obj["data"])
			},
			fail: function (err) {
				console.log('上传失败', JSON.stringify(err));
			}
		})
		//url转base64
		// urlTobase64(e.tempFilePaths[0])
	}
	const deleteImage=(e)=>
	{
		image.value.splice(e.index,1)
	
	}
	const urlTobase64 = (url) => {
		 let base64 = wx.getFileSystemManager().readFileSync(url, 'base64') 
		let toBase64Url = 'data:image/jpeg;base64,' + base64;
		 uploadFile(toBase64Url).then(res => {
		 			image.value.push(res.data)
		 })

	};
	defineExpose(
		{
			image
		})
</script>

<style scoped lang="scss">
	.uni-file-picker {
		border: 1px solid #dd0000;
	}
</style>